<template>
	<div>
		<headerTop></headerTop>
		<div class="table-container">
			<!-- tableData.slice((currentPage-1)*pageSize,currentPage*pageSize) element-ui分页 -->
		<el-table
		    ref="singleTable"
		    :data="tableData"
		    highlight-current-row
			border
		    style="width: 100%">
		    <el-table-column
		      type="index"
			  label="#"
		      width="100">
		    </el-table-column>
		    <el-table-column
		      property="registe_time"
		      label="注册日期"
		      width="220">
		    </el-table-column>
		    <el-table-column
		      property="username"
		      label="用户姓名"
		      width="220">
		    </el-table-column>
		    <el-table-column
		      property="city"
		      label="注册地址">
		    </el-table-column>
		  </el-table>
		  </div>
		  <div class="Pagination" style="text-align: left;margin-top: 10px;">
		      <el-pagination
		        @current-change="handleCurrentChange"
		        :current-page="currentPage"
				:page-size="20"
		        layout="total, prev, pager, next"
		        :total="count">
		      </el-pagination>
		  </div>
	</div>
</template>

<script>
	import headerTop from '../../../components/headerTop.vue'
	import {getUserList,getUserCount} from '../../../api/getData.js'
	export default {
		data(){
			return{
				tableData: [{
				          registe_time: '2016-05-02',
				          username: '王小虎',
				          city: '上海市普陀区金沙江路 1518 弄'
				        }, {
				          registe_time: '2016-05-02',
				          username: '王小虎',
				          city: '上海市普陀区金沙江路 1518 弄'
				        }, {
				          registe_time: '2016-05-02',
				          username: '王小虎',
				          city: '上海市普陀区金沙江路 1518 弄'
				        },],
				        currentPage: 1, // 当前页码
				        pageSize: 10 ,// 每页的数据条数
						count: 0,   //总数据量
						offset: 0  ,//跳过前面的数据
						limit: 20 //一页限制
						
			}
		},
		components:{
			headerTop
		},
		created(){
			this.initData()
		},
		methods:{
			//每页条数改变时触发 选择一页显示多少行
			     handleSizeChange(val) {
			         console.log(`每页 ${val} 条`);
			         this.currentPage = 1;
			         this.pageSize = val;
			     },
			     //当前页改变时触发 跳转其他页
			     handleCurrentChange(val) {
			         this.currentPage = val;
					 this.offset = (val - 1)*this.limit;
					 this.getUsers()
			     },
				 async initData(){
					 return await getUserCount().then(res => {
						 if(res.status == 1){
							 this.count = res.count
							 this.getUsers()
						 }else{
							 throw new Error('获取数据失败');
						 }
						 })
					     .catch(err => {
							 console.log(err,'获取数据失败')
						 })
					     
						 
				 },
				 async getUsers(){
					 return await getUserList({limit: this.limit, offset: this.offset}).then(res => {
						 this.tableData = [];
						 res.forEach(item => {
							 const tableData = {};
							 tableData.username = item.username;
							 tableData.registe_time = item.registe_time;
							 tableData.city = item.city;
							 this.tableData.push(tableData);
						 })
					 	 console.log(this.tableData)
					 	 })
					 	 .catch(err => {
					 		 console.log(err)
					 	 })
				 },
				 
		}
	}
</script>

<style lang="scss">
.table-container{
	padding: 20px;
}
</style>
